<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="list">
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
      <li>li4</li>
      <li>li5</li>
      <li>li5</li>
      <li>li5</li>
    </ul>
  </body>
  <script src="./eventUtil(事件委托JS文件).js"></script>
  <!-- 引入单独的事件委托JS文件 -->
  <script>
    // // 封装一个事件委托的对象  可以将此部分独立为一个JS文件
    // var EventUtil = {
    //   // event对象兼容处理
    //   getEvent: function (event) {
    //     return event || window.event;
    //   },
    //   // 目标对象兼容处理
    //   getTarget: function (event) {
    //     return event.target || event.srcElement;
    //   },
    //   // 绑定事件兼容处理
    //   addHandler: function (element, type, handler) {
    //     if (element.addEventListener) {
    //       //如果浏览器识别addEventListener()则不需要做兼容
    //       element.addEventListener(type, handler, false);
    //     } else if (element.attachEvent) {
    //       //兼容IE低版本
    //       element.attachEvent("on" + type, handler);
    //     } else {
    //       element["on" + type] = handler;
    //       //不可以直接用.语法，type为变量
    //     }
    //   },
    // };
    var oList = document.getElementById("list");
    // 将事件绑定(委托)给父级list
    EventUtil.addHandler(oList, "click", function (event) {
      //获取事件对象
      event = EventUtil.getEvent(event);
      // 获取目标对象
      var target = EventUtil.getTarget(event);
      console.log(target);
      target.style.color = "aqua";
      target.innerHTML += "<strong>aaa</strong>";
    });
  </script>
</html>
